src/app/groups/[groupId]/stats/totals-your-spending.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

'use client'
import { getGroup, getGroupExpenses } from '@/lib/api'
import { useActiveUser } from '@/lib/hooks'
import { getTotalActiveUserPaidFor } from '@/lib/totals'
import { formatCurrency } from '@/lib/utils'

type Props = {
  group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
  expenses: NonNullable<Awaited<ReturnType<typeof getGroupExpenses>>>
}

export function TotalsYourSpendings({ group, expenses }: Props) {
  const activeUser = useActiveUser(group.id)

  const totalYourSpendings =
    activeUser === '' || activeUser === 'None'
      ? 0
      : getTotalActiveUserPaidFor(activeUser, expenses)
  const currency = group.currency

  return (
    <div>
      <div className="text-muted-foreground">Total you paid for</div>

      <div className="text-lg">
        {formatCurrency(currency, totalYourSpendings)}
      </div>
    </div>
  )
}